<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/node.css" />
		<link rel="stylesheet" type="text/css" href="../../css/node.css" />
	</head>

	<body>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的收藏</h1>
		</header>

		<div id="scroll-wrapper" class="mui-content mui-scroll-wrapper ">

			<div id="list" class="mui-scroll ">
				<div id="item1">
					<div class="node-frame">
						<div id="theme" class="node-theme">aa</div>
						<img id="img1" class="node-img" src="../img/muwu.jpg" width="100%">
						<a class="node-txt-btn node-right5px">广告</a>
						<a class="node-txt-btn">下载</a>
					</div>
				</div>
				<div id="item2">
					<div class="node-frame">
						<div id="theme" class="node-theme">aa</div>
						<img id="img1" class="node-img" src="../img/muwu.jpg" width="48%">
						<img id="img2" class="node-img" src="../img/cbd.jpg" width="48%">
					</div>
				</div>
				<div id="item3">
					<div class="node-frame">
						<div id="theme" class="node-theme">aa</div>
						<img id="img1" class="node-img" src="../img/muwu.jpg" width="31%">
						<img id="img2" class="node-img" src="../img/cbd.jpg" width="31%">
						<img id="img3" class="node-img" src="../img/cbd.jpg" width="31%">
					</div>
				</div>
				<div id="item4">
					<div class="node-frame">
						<div style="height: 100px;">
							<img id="img1" class="node-img" src="../img/shuijiao.jpg" height="100%" align="left">
							<div id="theme" class="node-theme">bbbb</div>
						</div>
					</div>
				</div>
				<div id="item5">
					<div class="node-frame">
						<div style="height: 100px;">
							<img id="img1" class="node-img" src="../img/shuijiao.jpg" height="100%" align="right">
							<div id="theme" class="node-theme">bbbb</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js "></script>
		<script src="../../js/http.js "></script>
		<script src="../../json/data1.js"></script>

		<script type="text/javascript ">
			var mask = mui.createMask(_closeMenu);

			mui.init({
				swipeBack: false,
				preloadPages: [{
					id: 'offCanvas_3.html',
					url: 'offCanvas_3.html',
					styles: {
						left: "100%",
						width: '70%',
						top: 0,
						bottom: 51,
						zindex: 9997

					}
				}]
			});

			function show() {
				var page = plus.webview.getWebviewById("offCanvas_3.html");
				//侧滑菜单处于隐藏状态，则立即显示出来；
				//显示完毕后，根据不同动画效果移动窗体；
				page.show('none', 0, function() {
					page.setStyle({
						left: '30%',
						transition: {
							duration: 150
						}
					});
				});
				//显示遮罩
				mask.show();
			}

			function _closeMenu() {
				var page = plus.webview.getWebviewById("offCanvas_3.html");
				//主窗体开始侧滑；
				page.setStyle({
					left: '100%',
					transition: {
						duration: 150
					}
				});

				//等窗体动画结束后，隐藏菜单webview，节省资源；
				setTimeout(function() {
					page.hide();
				}, 200);
				curIndex = -1;
			}
			/**
			 * 关闭侧滑菜单
			 */
			function closeMenu(closeMask) {
				_closeMenu();
				mask.close();
			}

			var page = null;

			window.addEventListener("menuClose", closeMenu);
			window.addEventListener("hide", closeMenu);

			function onClick(url) {
				mui.openWindow(url, url);
			}
			mui('#scroll-wrapper').scroll();
			var list = document.getElementById("list");
			var item1 = document.getElementById("item1");
			var item2 = document.getElementById("item2");
			var item3 = document.getElementById("item3");
			var item4 = document.getElementById("item4");
			var item5 = document.getElementById("item5");
			item1.style.display = 'none';
			item2.style.display = 'none';
			item3.style.display = 'none';
			item4.style.display = 'none';
			item5.style.display = 'none';

			for(var i = 0; i < data1.length; i++) {
				var o = data1[i];
				var item = item5;
				if(o.img.length > 1) {
					item = item2;
				}
				if(o.img.length > 2) {
					item = item3;
				}
				if(o.title == null) {
					continue;
				}
				var div = item.cloneNode(true)
				var theme = div.querySelector("#theme");
				var img = div.querySelector("#img1");
				if(theme) {
					theme.textContent = o.title;
				}
				var imgs = div.querySelectorAll("img");
				for(var j = 0; j < imgs.length; j++) {
					imgs[j].src = "../"+o.img[j];
				}
				list.appendChild(div);
				div.style.display = 'inline';
				div.name = o.id;
				div.addEventListener("click", function() {
					mui.openWindow("details.html", this.name);
				});
			}
		</script>
	</body>

</html>